<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()

			function f() {
				mui("#demo1").progressbar({
					progress: 80
				}).show();
			}

			function update() {
				var newNum = document.getElementById("newNum").value;
				mui("#demo2").progressbar().setProgress(newNum);
			}

			function loop() {
				mui("#demo3").progressbar().show();
			}
			loop();
		</script>
	</head>

	<!--
				作者：460575807@qq.com
				时间：2017-07-11
				描述：当前容器包含.mui-progressbar类，则以当前容器为目标控件，直接显示进度；
				否则，检查当前容器的直接孩子节点是否包含.mui-progressbar类，若存在，则以遍历到的第一个含有.mui-progressbar类的孩子节点为目标控件，显示进度；
				若当前容器的直接孩子节点，均不含.mui-progressbar类,则自动创建进度条控件；
			-->

	<body>
		<div class="mui-content" align="center">
			<div>
				<div id="demo1" class="mui-progressbar">
					<span></span>
					<!-- span节点必须 进度的实现 -->
				</div>
				<button type="button" onclick="f()" style="margin-top: 40px;">progressBar show</button>
			</div>

			<div id="demo2" style="margin-top: 50px;" align="center">
				<div class="mui-progressbar" style="height: 6px;">
					<span></span>
				</div>
				<input type="number" id="newNum" style="width: 60px;margin-top: 5px;" />
				<br />
				<button type="button" onclick="update()" style="margin-top: 5px;">progressBar update</button>
			</div>

			<div id="demo3" style="margin-top: 15px;">
				<div id="demo3" class="mui-progressbar mui-progressbar-infinite">
					<span></span>
				</div>
			</div>
		</div>

	</body>

</html>